<template>
    <div>
        <div style="position: relative;">
            <div id="map1"></div>
            <div class="crs-tip map-left">投影坐标【EPSG: 3857】</div>
        </div>
        <div style="position: relative;">
            <div id="map2"></div>
            <div class="crs-tip map-right">投影坐标【EPSG: 53009】</div>
        </div>
    </div>
</template>

<script setup>
import Map from "ol/Map";
import View from "ol/View";
import TileLayer from "ol/layer/Tile";
import proj4 from 'proj4';
import { register } from 'ol/proj/proj4';
import VectorSource from "ol/source/Vector";
import VectorLayer from "ol/layer/Vector";
import GeoJSON from 'ol/format/GeoJSON';
import Projection from 'ol/proj/Projection';
import Graticule from 'ol/layer/Graticule';
import { XYZ } from 'ol/source';
import { ZoomSlider } from 'ol/control';
import {defaults} from 'ol/control/defaults'


/**
 * 天地图服务参数简单介绍
 *  vec:矢量底图
 *  img:影像底图
 *  ter:地形底图
 *  cta:影像注记
 *  ibl:矢量注记
 *  cia:影像注记
 *  iwan:矢量注记
 *  其中：_c 标识经纬度投影 _w 标识球面墨卡托投影
 *
 */

// 定义投影
proj4.defs(
    "ESRI:53009",
    "+proj=moll +lon_0=0 +x_0=0 +y_0=0 +R=6371000 +units=m +no_defs +type=crs"
);
// 注册投影
register(proj4)

const TIANDITUKEY = '5a4aa6d8a66c93a3c5bba95bf33526c4';

const TDTImgLayer = new TileLayer({
    title: '天地图影像图层',
    source: new XYZ({
        url: `http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}`,
        attibutions: '天地图注记描述',
        crossOrigin: 'anoymous',
        wrapX: false
    })
})

// const TDTImgCvaLayer = new TileLayer({
//     title: '天地图影像注记图层',
//     source: new XYZ({
//         url: `http://t0.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=${TIANDITUKEY}`,
//         attibutions: '天地图注记描述',
//         crossOrigin: 'anoymous',
//         wrapX: false
//     })
// })

const vectorLayer = new VectorLayer({
    source: new VectorSource({
        url: '../../data/countries.geo.json',
        format: new GeoJSON()
    })
})

const map1 = new Map({
    target: 'map1',
    loadTilesWhileAnimating: true,
    view: new View({
        center: [114.3165, 30.5953],
        zoom: 5,
        worldsWrap: true,
        minZoom: 1,
        maxZoom: 10,
        projection: 'EPSG:4326'
    }),
    layers: [TDTImgLayer, vectorLayer],
    controls: defaults({
        zoom: true,
        rotate: true, 
        attribution: false,
        label: '高德地图'
    })
})

const sphereMollweideProjection = new Projection({
    code: 'ESRI:53009',
    extent: [-9009954.605703328, -9009954.605703328, 9009954.605703328, 9009954.605703328],
    worldsWrap: [-179, -90, 179, 90],
})

// 投影转换
const transformMap = new Map({
    target: 'map2',
    layers: [
        TDTImgLayer,
        new VectorLayer({
            source: new VectorSource({
                url: '../../data/countries.geo.json',
                format: new GeoJSON()
            })
        })
    ],
    view: new View({
        center: [11421771, 4288300],
        zoom: 5,
        projection: sphereMollweideProjection
    }),
    controls: defaults({
        zoom: true,
        rotate: true, 
        attribution: false,
        label: '高德地图'
    })
})

// 添加参考系标线
// const graticule = new Graticule({
//     map: transformMap
// })
</script>

<style scoped>
* {
    padding: 0;
    margin: 0;
    font-size: 14px;
    font-family: '微软雅黑';
}

html,
body {
    width: 100%;
    height: 100%;
}

#map1, #map2 {
    width: 100%;
    height: 729px;
    border: 1px solid #000;
}

.crs-tip {
    position: absolute;
    top: 20px;
    background-color: #000000ab;
    padding: 5px;
    border-radius: 5px;
    color: #fff;
}

.map-left {
    left: 25%;
    transform: translateX(-25%);
}

.map-right {
    left: 75%;
    transform: translateX(-25%);
}
</style>